iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 17
2
Modern Web

Vue.js 30天系列 第 17

Vue.js 17 - 生命週期(Lifecycle)

  • 分享至 

  • xImage
  •  

在講組件掛載之前,發現前面漏寫了Vue的生命週期,這邊先岔個題、簡單說明。

Vue會把資料跟樣板綁在一起,使得開發者不需要自己做雜事,只需宣告好資料、要放在哪。
也因此,Vue執行了一連串工作,包含在原始資料加料、建立Vue Instance、編譯樣板、綁定資料等,隨著資料新增修改,週而復始直到刪除,稱為生命週期(Lifecycle)。

在他做這些工作的時機點前後,提供你客製化的空間,稱為Hook(如圖上白底紅字的部分)。
http://ithelp.ithome.com.tw/upload/images/20170102/20103424HFA0Wo4Sn5.png

寫個簡單的範例,一個 instance 底下掛了兩個 component,來測試生命週期。

<div id="app">
    <example id="1"></example>
    <example id="2"></example>
</div>

<script>
Vue.component('example', require('./components/Example.vue'));

var app = new Vue({
    el: '#app',
    beforeCreate: function() { /*...*/ },
    created: function() { /*...*/ },
    beforeMount: function() { /*...*/ },
    mounted: function() { /*...*/ },
    /* 初始化不會觸發 */
    beforeUpdate: function() { /*...*/ },
    updated: function() { /*...*/ }
});
</script>

觀察到幾個現象:

  1. 執行順序
  2. 不論 Vue Instance組件/元件(Component),都是等待子組件準備掛載完,自己才掛上去。
  3. 資料在created以後才存取得到(意味別把資料初始化跟ajax寫在beforeCreate)。

http://ithelp.ithome.com.tw/upload/images/20170102/201034241prtzWi9D9.png


上一篇
Vue.js 16 - 組件/元件(Component) - 樣板宣告及動態插入內容
下一篇
Vue.js 18 - 組件/元件(Component) - 組件掛載及限制
系列文
Vue.js 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
colonsong
iT邦新手 5 級 ‧ 2017-01-25 00:58:48

圖片失效了@@

Ralph iT邦新手 5 級 ‧ 2017-01-27 00:53:06 檢舉

沒發現這種情況耶,有其他人碰到嗎?

colonsong iT邦新手 5 級 ‧ 2017-02-06 02:01:53 檢舉

有看到了 謝謝~

我要留言

立即登入留言